<template>
	<view class="car">
		<view class="car-box" v-for="item in carList" :key="item">
			<view class="left-car-src-box">
				<image class="car-src" :src="item.carSrc" />
			</view>
			
			<view class="right-info-box">
				<view class="car-name">名称：{{ item.carName }}</view>
				<view class="car-leve">级别：{{ item.leve }}</view>
				<view class="car-price">指导价：{{ item.bottomPrice }} ~ {{ item.maximumPrice }}万</view>
				<view class="car-desc">简介：{{ item.desc }}</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { defineProps } from 'vue';
	
	const props = defineProps({
		tabsId: String || null
	});
	
	// 汽车榜
	const carList = [
		{
			carSrc: 'https://fyb-2.cdn.bcebos.com/hotboard_image/c1e5366eb80ac243e677e27117a4b9e5?x-bce-process=image/resize,m_fill,w_214,h_214', // 汽车主图
			carName: '奔驰', // 汽车名称
			leve: 'S', // 级别
			bottomPrice: 538.0, // 最低价
			maximumPrice: 1200.0, // 最高价
			desc: '迈巴赫（德文：Maybach）与迈巴赫引擎制造厂（德文：Maybach-Motorenbau GmbH）是曾经在1921年到1940年间活跃于欧洲地区的德国超豪华汽车品牌与制造厂。', // 描述
		},
		{
			carSrc: 'https://fyb-2.cdn.bcebos.com/hotboard_image/c1e5366eb80ac243e677e27117a4b9e5?x-bce-process=image/resize,m_fill,w_214,h_214', // 汽车主图
			carName: '奔驰', // 汽车名称
			leve: 'E', // 级别
			bottomPrice: 30.0, // 最低价
			maximumPrice: 100.0, // 最高价
			
			desc: '迈巴赫（德文：Maybach）与迈巴赫引擎制造厂（德文：Maybach-Motorenbau GmbH）是曾经在1921年到1940年间活跃于欧洲地区的德国超豪华汽车品牌与制造厂。', // 描述
		},
	]
</script>

<style lang="scss" scoped>
	.car {
		width: 100%;
		height: calc(100vh - 100rpx);
		// margin-top: 100rpx;
		overflow: auto;
		background-color: #f5f5f5;

		.car-box {
			width: 100%;
			margin-bottom: 12rpx;
			padding: 24rpx;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
			
			.left-car-src-box {
				width: 180rpx;
				height: 180rpx;
				border-radius: 16rpx;
				margin-right: 24rpx;
				
				.car-src {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
					background-color: rgba(0, 0, 0, 0.1);
				}
			}
			
			.right-info-box {
				width: calc(100% - 180rpx - 24rpx);
				
				.car-name {
					font-size: 28rpx;
					font-weight: 700;
				}
				
				.car-leve {
					margin-top: 12rpx;
					font-size: 26rpx;
				}
				
				.car-price {
					margin-top: 12rpx;
					font-size: 28rpx;
					color: red;
					font-weight: 700;
				}
				
				.car-desc {
					margin-top: 12rpx;
					font-size: 20rpx;
					color: #000;
					line-height: 36rpx;
				}
			}
		}
	}
</style>